<html>
    <head>
        <meta charset="utf-8">
        
            <script src="lib/bindings/utils.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
        
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
          crossorigin="anonymous"
        ></script>


        <center>
          <h1></h1>
        </center>
        <style type="text/css">

             #mynetwork {
                 width: 100%;
                 height: 800px;
                 background-color: #ffffff;
                 border: 1px solid lightgray;
                 position: relative;
                 float: left;
             }

             

             

             
        </style>
    </head>


    <body>
        <div class="card" style="width: 100%">
            
            
            <div id="mynetwork" class="card-body"></div>
        </div>

        
        

        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };

              

              

              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');

                  

                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"group": "KnowledgePoint", "id": 11, "label": "KP0101\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH01\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 15, "label": "KP0105\nBloom:5", "shape": "dot", "size": 45, "title": "\u7ae0\u8282:CH01\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 12, "label": "KP0102\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH01\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 13, "label": "KP0103\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH01\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 14, "label": "KP0104\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH01\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 16, "label": "KP0201\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH02\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 20, "label": "KP0205\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH02\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 17, "label": "KP0202\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH02\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 18, "label": "KP0203\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH02\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 19, "label": "KP0204\nBloom:5", "shape": "dot", "size": 45, "title": "\u7ae0\u8282:CH02\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 21, "label": "KP0301\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH03\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 25, "label": "KP0305\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH03\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 22, "label": "KP0302\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH03\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 23, "label": "KP0303\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH03\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 24, "label": "KP0304\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH03\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 26, "label": "KP0401\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH04\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 30, "label": "KP0405\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH04\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 27, "label": "KP0402\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH04\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 28, "label": "KP0403\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH04\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 29, "label": "KP0404\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH04\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 31, "label": "KP0501\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH05\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 35, "label": "KP0505\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH05\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 32, "label": "KP0502\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH05\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 33, "label": "KP0503\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH05\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 34, "label": "KP0504\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH05\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 36, "label": "KP0601\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH06\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 40, "label": "KP0605\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH06\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 37, "label": "KP0602\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH06\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 38, "label": "KP0603\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH06\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 39, "label": "KP0604\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH06\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 41, "label": "KP0701\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH07\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 45, "label": "KP0705\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH07\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 42, "label": "KP0702\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH07\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 43, "label": "KP0703\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH07\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 44, "label": "KP0704\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH07\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 46, "label": "KP0801\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH08\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 50, "label": "KP0805\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH08\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 47, "label": "KP0802\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH08\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 48, "label": "KP0803\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH08\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 49, "label": "KP0804\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH08\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 51, "label": "KP0901\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH09\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 55, "label": "KP0905\nBloom:6", "shape": "dot", "size": 50, "title": "\u7ae0\u8282:CH09\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 52, "label": "KP0902\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH09\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 53, "label": "KP0903\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH09\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 54, "label": "KP0904\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH09\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 56, "label": "KP1001\nBloom:1", "shape": "dot", "size": 25, "title": "\u7ae0\u8282:CH10\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 59, "label": "KP1004\nBloom:4", "shape": "dot", "size": 40, "title": "\u7ae0\u8282:CH10\n\u6838\u5fc3:True"}, {"group": "KnowledgePoint", "id": 57, "label": "KP1002\nBloom:2", "shape": "dot", "size": 30, "title": "\u7ae0\u8282:CH10\n\u6838\u5fc3:False"}, {"group": "KnowledgePoint", "id": 58, "label": "KP1003\nBloom:3", "shape": "dot", "size": 35, "title": "\u7ae0\u8282:CH10\n\u6838\u5fc3:False"}, {"group": "SubKnowledgePoint", "id": 629, "label": "SUB1020\nBloom:5", "shape": "dot", "size": 45, "title": "\u7ae0\u8282:CH10\n\u6838\u5fc3:True"}, {"group": "SubKnowledgePoint", "id": 628, "label": "SUB1019\nBloom:5", "shape": "dot", "size": 45, "title": "\u7ae0\u8282:CH10\n\u6838\u5fc3:True"}]);
                  edges = new vis.DataSet([{"arrows": "to", "color": "#F5A623", "from": 11, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 4", "to": 15, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 11, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 12, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 12, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 13, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 13, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 14, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 14, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 15, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 15, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 3", "to": 16, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 16, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 4", "to": 20, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 16, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 17, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 17, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 18, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 18, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 19, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 19, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 20, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 20, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 21, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 21, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 25, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 21, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 22, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 22, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 23, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 23, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 24, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 24, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 25, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 25, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 26, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 26, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 30, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 26, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 27, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 27, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 28, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 28, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 29, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 29, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 30, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 30, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 31, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 31, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 35, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 31, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 32, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 32, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 33, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 33, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 34, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 34, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 35, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 35, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 36, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 36, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 40, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 36, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 37, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 37, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 38, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 38, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 39, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 39, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 40, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 40, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 41, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 41, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 45, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 41, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 42, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 42, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 43, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 43, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 44, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 44, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 45, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 45, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 46, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 46, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 50, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 46, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 47, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 47, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 48, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 48, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 49, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 49, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 50, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 50, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 51, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 51, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 5", "to": 55, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 51, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 52, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 52, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 53, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 53, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 54, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 54, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 2", "to": 55, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 55, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 5", "to": 56, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 56, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 3", "to": 59, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 56, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 57, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 57, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 58, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 58, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 59, "width": 1}, {"arrows": "to", "color": "#F5A623", "from": 59, "title": "\u4f20\u7edf\u8def\u5f84 | Bloom\u5dee: 1", "to": 629, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 59, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 1", "to": 628, "width": 1}, {"arrows": "to", "color": "#50E3C2", "from": 628, "title": "\u6539\u8fdb\u8def\u5f84 | Bloom\u5dee: 0", "to": 629, "width": 1}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {"physics": {"stabilization": {"iterations": 200}, "hierarchical": {"enabled": true, "levelSeparation": 150, "nodeSpacing": 200}}, "nodes": {"scaling": {"min": 20, "max": 50}}};

                  


                  

                  network = new vis.Network(container, data, options);

                  

                  

                  


                  

                  return network;

              }
              drawGraph();
        </script>
    </body>
</html>